<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>过滤器</title>
    </head>
    <body>

        <h3>过滤器适用于 vue.js 2.x ，不适用于 vue.js 3.x</h3>

        <div class="root"></div>

        <script src="vue@2.6.14.js"></script>

        <script type="text/javascript">
            let options = {
                el: '.root' ,
                template: `<p>{{ now | formatter }}</p>`,
                data: {
                    now: new Date()
                },
                filters: {
                    formatter(value){
                        console.log( 'value: ' , Object.prototype.toString.call( value ) );
                        let date = value ;
                        let hours = '' + date.getHours();
                        hours = hours.padStart(2,'0');

                        let minutes = String( date.getMinutes() );
                        minutes = minutes.padStart(2,'0');

                        let seconds = String( date.getSeconds() );
                        seconds = seconds.padStart(2,'0');

                        return `${date.getFullYear()}年
                                ${date.getMonth()+1}月
                                ${date.getDate()}日 
                                ${hours}:${minutes}:${seconds}`;
                    }
                }
            }
            const app = new Vue(options);
        </script>
        
    </body>
</html>